import React, { Component } from 'react'
import './CSS/base.css' //css class 直接引用 可复用
class Navbar extends Component {
    myRef = React.createRef()//绑定ref
    state = {
        text: 'text'
    }
    render() {
        let name = '我是变量'
        let obj = {
            background: 'red',
            fontSize: '20px' //-需要变成驼峰大写写法  或者直接字符串
        }
        return <div style={obj}>
            {name}
            {this.state.text}
            <div ref={this.myRef} htmlFor='username' onClick={() => {
                this.setState({
                    text: 'tttt'
                })
            }}>→</div>
            <input type='text' id='username'></input>
        </div >
    }
}

function Swiper() {
    return <div className="active">Swiper</div>
}

export default class App extends Component {
    render() {
        return (
            <div>
                <Navbar></Navbar>
                <Swiper></Swiper>
            </div>
        )
    }
}
